<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 1.准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom。用于支持react操作DOM -->
<script src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">

    /*
    * 慢动作回放---使用index索引值作为key
    * 初始数据： {id:1,name:'小张',age:18},
            {id:2,name:'小红',age:28},
    初始的虚拟DOM：
    * <li key=0>小张----18<input type="text"/></li>
    * <li key=1>小红----28<input type="text"/></li>
    *
    * 更新后的数据：{id:3,name:'小王',age:17},
    *           {id:1,name:'小张',age:18},
                {id:2,name:'小红',age:28},
    *更新数据后的虚拟DOM
    * <li key=0>小王----17<input type="text"/></li>
    * <li key=1>小张----18<input type="text"/></li>
    * <li key=2>小红----28<input type="text"/></li>
    *
    * */

    /*
   * 慢动作回放---使用id（数据的唯一标识）作为key
   * 初始数据： {id:1,name:'小张',age:18},
           {id:2,name:'小红',age:28},
   初始的虚拟DOM：
   * <li key=1>小张----18<input type="text"/></li>
   * <li key=2>小红----28<input type="text"/></li>
   *
   * 更新后的数据：{id:3,name:'小王',age:17},
   *           {id:1,name:'小张',age:18},
               {id:2,name:'小红',age:28},
   *更新数据后的虚拟DOM
   * <li key=3>小王----17<input type="text"/></li>
   * <li key=1>小张----18<input type="text"/></li>
   * <li key=2>小红----28<input type="text"/></li>
   *
   * */
    class Person extends React.Component{
        //初始化
        state = {
            persons:[
                {id:1,name:'小张',age:18},
                {id:2,name:'小红',age:28},
            ]
        }
        add=()=>{
        const{persons} = this.state
            const p = {id:persons.length+1,name:'小王',age:17}
            this.setState({persons:[p,...persons]})
        }
        render() {
            return(
                <div>
                    <h3>使用index索引值作为key</h3>
                    <button onClick={this.add}>添加一个小王</button>
                    <ul>
                        {
                            this.state.persons.map((personObj,index)=>{
                                return <li key={index}>{personObj.name}----{personObj.age} <input type="text"/></li>
                            })
                        }
                    </ul>
                    <hr/>
                    <hr/>
                    <h3>使用id（数据的唯一标识）作为key</h3>
                    <ul>
                        {
                            this.state.persons.map((personObj)=>{
                                return <li key={personObj.id}>{personObj.name}----{personObj.age} <input type="text"/></li>
                            })
                        }
                    </ul>
                </div>

            )
        }
    }
    ReactDOM.render(<Person/>,document.getElementById('test'))
</script>
</body>
</html>